:root {
  --f7-theme-color: #f76d0f;
  --f7-bars-bg-color: #f76d0f;
  --f7-toolbar-bg-color: #fff;
  --f7-button-pressed-bg-color: #f76d0f;
  --f7-statusbar-bg-color: var(--f7-theme-color);
  --f7-navbar-bg-color: var(--f7-theme-color);
  --f7-bars-text-color: #fff;
  --f7-navbar-text-color: #fff;
  --f7-navbar-link-color: var(--f7-navbar-text-color);
  --f7-tabbar-link-active-color: var(--f7-theme-color);
}

// navbar title
.navbar.zx_navbar_title .title{
  position: absolute;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
}
// tabs animated
.tabs-animated-wrap>.tabs>.tab{
  position: relative;
}
.zx_tabs {
  .page-content{
    padding-top: var(--f7-navbar-height);
  }
}
// active-state button
.button.active-state{
  background-color: var(--f7-theme-color) !important;
  color: #fff;
}
// toolbar-inner
.toolbar-inner{
  padding: 0;
}
